<template>
    <div class="table-page">
        <div class="table-search-box" @keyup.enter="search()">
            <div v-if="initParam.role === 'admin' || initParam.role === 'channelBusiness'  " class="search-item">
                <label>操作者：</label>
                <div class="table-query-input">
                    <el-select v-model="queryData.userId"
                               v-loading="userLoading"
                               filterable
                               clearable
                               placeholder="请选择">
                        <el-option
                            v-for="item in userList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="search-item">
                <label>支付状态：</label>
                <div class="table-query-input">

                    <el-select v-model="queryData.orderStatus"
                               filterable
                               clearable
                               placeholder="请选择">
                        <el-option
                            v-for="item in orderStatusList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <!--            <div class="search-item">-->
            <!--                <label>起止时间：</label>-->
            <!--                <div class="table-query-input">-->
            <!--                    <el-date-picker-->
            <!--                        v-model="queryData.time"-->
            <!--                        type="datetimerange"-->
            <!--                        value-format="yyyy-MM-dd HH:mm:ss"-->
            <!--                        range-separator="至"-->
            <!--                        start-placeholder="开始日期"-->
            <!--                        end-placeholder="结束日期">-->
            <!--                    </el-date-picker>-->
            <!--                </div>-->
            <!--            </div>-->
            <div class="search-item">
                <label>起止时间：</label>
                <el-date-picker
                    v-model="queryData.startTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="search-item">
                <label class="minWidthClear">至：</label>
                <el-date-picker
                    v-model="queryData.endTime"
                    type="date"
                    placeholder="选择日期">
                </el-date-picker>
            </div>
            <div class="search-item">
                <label>激活码：</label>
                <el-input v-model="queryData.code"  clearable/>
            </div>
            <div class="search-item">
                <el-button
                    type="primary"
                    icon="el-icon-search"
                    :loading="tableLoading"
                    @click="clickSearch(true)"
                >搜索
                </el-button
                >
            </div>
            <div class="search-item">
                <el-button
                    icon="el-icon-refresh"
                    :loading="tableLoading"
                    @click="resetSearch()"
                >重置
                </el-button>
            </div>
        </div>
        <div style="margin-bottom: 10px;">金额: {{ priceChange(totalMoney) }}</div>
        <div class="table-data-box">
            <el-table
                ref="table"
                v-loading="tableLoading"
                :data="tableData"
                border
                style="width: 100%;min-height:40em"
                row-key="id"
            >
                <el-table-column
                    prop="createdByName"
                    label="操作者"
                    min-width="120"
                ></el-table-column>

                <el-table-column
                    prop="entityName"
                    label="套餐名称"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="extr.skuName"
                    label="sku名称"
                    width="200"
                ></el-table-column>
                <el-table-column prop="price" label="支付金额">
                    <template slot-scope="scope">
                        {{ priceChange(scope.row.price) }}
                    </template>
                </el-table-column>
                <el-table-column prop="orderStatus" label="支付状态" width="100">
                    <template slot-scope="scope">
                        <k-tag
                            :tag="orderStatus[scope.row.orderStatus]"
                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createdTime"
                    label="支付时间"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="extr.id"
                    label="提码code"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="extr.status"
                    label="提码状态"
                    width="200"
                >
                    <template slot-scope="scope">
                        <k-tag
                            :tag="codeStatus[scope.row.extr.status]"

                        ></k-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="extr.userName"
                    label="激活用户"
                    width="200"
                ></el-table-column>
                <el-table-column
                    prop="extr.userTime"
                    label="激活时间"
                    width="200"
                ></el-table-column>
                <el-table-column
                    label="操作"
                    width="300"
                    align="center"
                    fixed="right"
                >
                    <template slot-scope="scope">
                        <el-button
                            v-if=" scope.row.extr.status === 'effective'"
                            type="text"
                            size="mini"
                            class="danger"
                            icon="el-icon-coin"
                            :loading="scope.row.opLoading"
                            @click="refund(scope.row)"
                        >退款
                        </el-button>
                        <el-button
                            v-if=" scope.row.extr.status === 'used'"
                            :loading="scope.row.opLoading"
                            class="warning"
                            type="text"
                            size="mini"
                            icon="el-icon-refresh-right"
                            @click="resetPass(scope.row.extr)"
                        >重置密码
                        </el-button>
                        <!--                        <el-button-->
                        <!--                            v-if=" scope.row.extr.status === 'used'"-->
                        <!--                            :loading="scope.row.opLoading"-->
                        <!--                            size="mini"-->
                        <!--                            type="text"-->
                        <!--                            icon="el-icon-folder-opened"-->
                        <!--                            @click="studyDetail(scope.row)"-->
                        <!--                        >详情-->
                        <!--                        </el-button>-->
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div v-if="pageData.total" class="xy-between table-page-box">
            <el-pagination
                background
                :current-page.sync="pageData.currentPage"
                :page-sizes="pageData.pageSizes"
                :page-size.sync="pageData.pageSize"
                layout="total,  prev, pager, next, sizes, jumper"
                :total="pageData.total"
            >
            </el-pagination>
        </div>
        <el-dialog
            :visible.sync="showAnaly"
            width="80%"
        >
            <order-detail-component v-if="showAnaly" ref="analyRef" :order-id="orderId"></order-detail-component>
        </el-dialog>

    </div>
</template>

<script>
import {TablePage} from "@/layout/mixin/iVue.js";
import {mapState} from "vuex";
import {getAgentUserList, getAgentOrderMoneyList} from "@/api/user.js";
import {post} from "@/api/request";
import OrderDetailComponent from "@/views/models/sys/agent/orderDetailComponent";

export default {
    name: "ConsumCodeListComponent",
    components: {OrderDetailComponent},
    mixins: [TablePage],
    props: {
        initParam: {
            type: Object,
            default() {
                return {
                    all: "true"
                };
            }
        }
    },
    data() {
        return {
            orderId: null,
            initOk: false,
            queryData: {
                agentId: null,
                userId: null,
                orderStatus: null,
                time: null,
                all: this.initParam.all,
                type: "openCode"
            },
            courseId: null,
            userId: null,
            showAnaly: false,
            key: 0,
            agentLoading: false,
            agentList: [],
            userLoading: false,
            totalMoney: 0,
            userList: [],

            orderStatusList: [
                {"label": "等待支付", "value": "waitPay"},
                {"label": "待发货", "value": "waitSend"},
                {"label": "待签收", "value": "waitSign"},
                {"label": "成功", "value": "success"},
                {"label": "申请退款中", "value": "applyRefund"},
                {"label": "退款中", "value": "refunding"},
                {"label": "退款完成", "value": "refundSuccess"},
                {"label": "退款失败", "value": "refundFail"},
                {"label": "已取消", "value": "cancel"},
                {"label": "已过期", "value": "expired"},
                {"label": "用户删除", "value": "delete"},
            ]
        };
    },
    computed: {
        ...mapState({
            orderStatus: state => state.status.orderStatus,
            codeStatus: state => state.status.codeStatus,
        })
    },
    watch: {},
    created() {

        this.getUserList(null);
        this.refreshMoney();
    },
    mounted() {
    },
    methods: {
        clickSearch() {
            this.refreshMoney();
            if (this.pageData.currentPage === 1) {
                this.search();
            } else {
                this.pageData.currentPage = 1;
                this.search();
            }
        },
        resetSearch() {
            this.queryData = {...this.initQueryData};
            this.refreshMoney();
            if (this.pageData.currentPage === 1) {
                this.search();
            } else {
                this.pageData.currentPage = 1;
            }
        },
        async refund(data) {
            await this.$confirm("确定退款吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            });
            this.tableLoading = true;
            data.opLoading = true;
            post(`/order/or/order/agent/refuse`, {
                id: data.id
            }).then(() => {
                this.tableLoading = false;
                this.search()
            }).finally(() => {
                data.opLoading = false;
                this.tableLoading = false;
            })
        },
        async resetPass(data) {
            await this.$confirm("确定将密码重置为tk123456吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            });
            data.opLoading = true;
            post(`/user/cu/user/change/password-admin/${data.userId}`, {
                newPassword: "tk123456"
            })
                .then(() => {
                    this.$message.success("重置成功");
                    data.opLoading = false;
                })
                .catch(e => {
                    this.$message.error("重置失败");
                    data.opLoading = false;
                });
        },
        studyDetail(data) {
            this.showAnaly = true;
            this.orderId = data.id;
        },
        search(refresh) {

            let tempQueryDate = {...this.queryData};
            if (this.queryData.startTime && this.queryData.endTime) {
                tempQueryDate.startTime = this.queryData.startTime.format("yyyy-MM-dd") + " 00:00:00";
                tempQueryDate.endTime = this.queryData.endTime.format("yyyy-MM-dd") + " 23:59:59";
            } else {
                delete tempQueryDate.startTime;
                delete tempQueryDate.endTime;
            }
            if (refresh) {
                this.refreshMoney();
            }
            this.loadTable("/order/or/order/agent/open-page", tempQueryDate);
        },
        refreshMoney() {
            let tempQueryDate = {...this.queryData};
            if (this.queryData.startTime && this.queryData.endTime) {
                tempQueryDate.startTime = this.queryData.startTime.format("yyyy-MM-dd") + " 00:00:00";
                tempQueryDate.endTime = this.queryData.endTime.format("yyyy-MM-dd") + " 23:59:59";
            } else {
                delete tempQueryDate.startTime;
                delete tempQueryDate.endTime;
            }
            getAgentOrderMoneyList(tempQueryDate).then(res => {
                this.totalMoney = res;
            })
        },
        priceChange(number) {
            const bs = number / 100;
            return bs.toFixed(2) + "元";
        },
        getUserList(agentId) {
            this.userLoading = true;
            getAgentUserList({size: 1000, agentId: agentId, ...this.initParam}).then(res => {
                this.userList = res;
            }).finally(() => {
                this.userLoading = false;
            })

        },
    }
};
</script>

<style lang="scss" scoped>
.school-logo {
    .logo-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 108px;
        height: 108px;
        line-height: 108px;
        text-align: center;
    }

    .logo-img {
        width: 108px;
        height: 108px;
        display: block;
    }
}

.table-edit-from {
    .address-select {
        width: 8em;
        margin-right: 2em;
    }
}
</style>
<style>
.school-logo .logo-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.minWidthClear {
    min-width: 0 !important;
}

.school-logo .logo-uploader .el-upload:hover {
    border-color: #409eff;
}
</style>
